<script>
import Message from './Message.vue'
export default {
  data() {
    return {
      charactor: '~~~',
      fruits: [
        '🍒',
        '🍇'
      ]
    }
  },
  components: {
    Message
  }
}
</script>

<template>
  <div>
    <Message title="hello" :fruits="fruits">
      <template #header2="data">
        <h2>
          {{charactor}} {{data.msg}}
        </h2>
      </template>

      <template #header1="{fruits}">
        <h1>
          world!!!
        </h1>
        <ul>
          <li v-for="fruit in fruits">
            {{fruit}}
          </li>
        </ul>
      </template>
    </Message>
  </div>
</template>

<style lang="scss">
  
</style>
